{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
<style>

  #closeModalButton {
    float: right; /* 使按钮居右 */
    background-color: #DC143C; /* red */
    color: white; /* 按钮文字颜色为白色 */
    padding: 10px 20px; /* 增加按钮的内边距，使其尺寸更大，更易于点击 */
    font-size: 16px; /* 增加字体大小，提高可读性 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标悬停时显示指针，表明这是一个可点击的元素 */
    border-radius: 5px; /* 添加圆角边框，使按钮看起来更圆润 */
  }
  
  #closeModalButton:hover {
    background-color: navy; /* 鼠标悬停时，按钮背景颜色变为更深的蓝色 */
  }

  /* 模态窗口基本样式 */
  .qrModal {
      position: fixed; /* 固定定位，始终在视口中间 */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); /* 居中显示 */
      background-color: white; /* 背景色 */
      padding: 20px; /* 内边距 */
      border: 1px solid #ccc; /* 边框 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
      z-index: 1000; /* 确保在最上层 */
      display: none; /* 默认不显示 */
  }
  
  /* 背景遮罩样式 */
  .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      z-index: 999; /* 确保在模态窗口下层 */
      display: none; /* 默认不显示 */
  }
</style>

  {{ block.super }}
  <link rel="stylesheet" href="{% static "admin/css/changelists.css" %}">
  {% if cl.formset %}
    <link rel="stylesheet" href="{% static "admin/css/forms.css" %}">
  {% endif %}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {width: inherit}
    </style>
  {% endif %}

  {% endblock %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
<script src="{% static 'admin/js/filters.js' %}" defer></script>
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
&rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
</div>
{% endblock %}
{% endif %}

{% block coltype %}{% endblock %}

{% block content %}
  <div id="content-main">
    {% block object-tools %}
        <ul class="object-tools">
          {% block object-tools-items %}
            {% change_list_object_tools %}
          {% endblock %}
        </ul>
    {% endblock %}
    {% if cl.formset and cl.formset.errors %}
        <p class="errornote">
        {% blocktranslate count counter=cl.formset.total_error_count %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
        </p>
        {{ cl.formset.non_form_errors }}
    {% endif %}
    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
      <div class="changelist-form-container">
        {% block search %}{% search_form cl %}{% endblock %}
        {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}

        <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}

        {% block result_list %}
          {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
          {% result_list cl %}
          {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
        {% endblock %}
        {% block pagination %}{% pagination cl %}{% endblock %}
        </form>
      </div>
      {% block filters %}
        {% if cl.has_filters %}
          <div id="changelist-filter">
            <h2>{% translate 'Filter' %}</h2>
            {% if cl.is_facets_optional or cl.has_active_filters %}<div id="changelist-filter-extra-actions">
              {% if cl.is_facets_optional %}<h3>
                {% if cl.add_facets %}<a href="{{ cl.remove_facet_link }}" class="hidelink">{% translate "Hide counts" %}</a>
                {% else %}<a href="{{ cl.add_facet_link }}" class="viewlink">{% translate "Show counts" %}</a>{% endif %}
              </h3>{% endif %}
              {% if cl.has_active_filters %}<h3>
                <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
              </h3>{% endif %}
            </div>{% endif %}
            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>

  <!-- Keng add, custom change_list.html -->
  <!-- 模态框HTML -->
   <!-- add a close button id is closeModalButton -->


  <div id="qrModal" class='qrModal' style="display:none;">
    
    <div class="modal-header">
      <!-- 关闭按钮 -->
      <button id="closeModalButton">X</button>
    </div>
    
      <!-- 模态框主体内容 -->
  <div class="modal-body">
    <h3>车牌号: <span id="licensePlate"></span></h3>
    <h3>进入时间: <span id="entryTime"></span></h3>
    <h3>离开时间: <span id="exitTime"></span></h3>
    <img id="qrImage" src="" alt="二维码">
  </div>

  
  </div>

  <!-- 背景遮罩 -->
  <div class="modal-backdrop"></div>
  
<!-- Kzeng add for custom change_list.html --->
<!-- JavaScript代码 -->
<script>
  // 定义一个函数来显示模态框，并设置内容
 function showQRModal(licensePlate, entryTime, exitTime, qrImageUrl) {
  var qrImageUrl = encodeURIComponent(qrImageUrl);
  //alert("before:  " + qrImageUrl);
  //alert('showQRModal');
   // 设置模态框中的内容
   document.getElementById('licensePlate').textContent = licensePlate;
   document.getElementById('entryTime').textContent = entryTime;
   document.getElementById('exitTime').textContent = exitTime;
   // qrImageUrl url deencode
    qrImageUrl = decodeURIComponent(qrImageUrl);
    //alert(qrImageUrl);
    document.getElementById('qrImage').src = qrImageUrl;
   //document.getElementById('qrImage').src = qrImageUrl;
   document.getElementById('licensePlate').textContent = licensePlate;
  //alert(licensePlate);
  //alert(entryTime);
  //alert("after:   " + qrImageUrl);

   // 显示模态框
   document.getElementById('qrModal').style.display = 'block';
   document.querySelector('.modal-backdrop').style.display = 'block';
 }
 
 // 定义一个函数来隐藏模态框
 function hideQRModal() {
   document.getElementById('qrModal').style.display = 'none';
    document.querySelector('.modal-backdrop').style.display = 'none';
 }
 
 // 假设你有一个关闭按钮在模态框中，为它添加点击事件监听器来隐藏模态框
 document.getElementById('closeModalButton').addEventListener('click', hideQRModal);
 
   </script>
 

{% endblock %}

